<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>联盟论坛</title>
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.css" >
<link type='text/css' rel='stylesheet' href="${base}/foreground/css/style.css" />
<link type="text/css" rel="stylesheet" href="${base}/res/layui/css/layui.css">
<style>
	#user-text{
		margin:0; 
		padding:0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#user-text p{
		margin:0; 
		padding:0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#jiantou{
		background:url(${base}/foreground/images/jiantou.png) center center no-repeat;
		width: 33px;
		height: 11px;
		display: block;
		padding: 10px 0;
		margin-top: 16px;
	}
	#container{
		text-transform: uppercase;
		color: #fff;font-weight: 700;
		font: 16px 瀹嬩綋 Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	.nav>li>a:focus,.nav>li>a:hover{
		background-color:#000000;
	}
	.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
		background-color: #000000;
	} 
	.navbar-nav>li>.dropdown-menu{
		background-color: #000000;
	}
	.dropdown-menu>li>a{
		color:#fff;
	}
	#current_user{
		color: #fff;
	}
	.caret{
		color: #fff;
	}
	.modal-body table>tbody>tr>td{
		    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    cursor: pointer;
	}
</style>

</head>
<body >
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.jsp"><img src="${base}/foreground/images/logo.png" alt=""></a>
		</div>
	
		<div class="navigation">
			<ul class="navig cl-effect-3" style="float:left; width:400px">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li><a href="${base }/foreground/hero.jsp">英雄资料</a></li>
				<li><a href="${base }/foreground/blog.jsp">联盟论坛</a></li>
				<li><a href="${base }/foreground/index.jsp">关于</a></li>
			</ul>
			<c:choose>
				<c:when test="${sessionScope.userName==null}">
					<ul class="navig cl-effect-3" style="float:right; width:200px">
						<li><a href="${base }/loginsystem/index.jsp">登录OR注册</a></li>
					</ul>
				</c:when>
				<c:otherwise>
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown" role="button" aria-haspopup="true"
									aria-expanded="false"><span id="current_user"><img
											src="${sessionScope.userPic }" style="width: 40px;height: 40px;border-radius: 50%">${sessionScope.userName}</span>
										<span class="caret"></span></a>
									<ul class="dropdown-menu" style="cursor: pointer">
										<li><a data-toggle="modal" data-target="#myInfo">个人信息</a></li>
										<li><a data-toggle="modal" data-target="#myArticle">我的文章</a></li>
										<li><a data-toggle="modal" data-target="#modifyPassword">修改密码</a></li>
										<li role="separator" class="divider"></li>
										<li><a href="${base }/action/login/exit">退出登录</a></li>
									</ul></li>
							</ul>
						</div>
					</c:otherwise>
			</c:choose>
		</div>
	</div>
</div>

<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li>&nbsp;&nbsp;/&nbsp;&nbsp;<li>
				<li> <a class="act" href="${base }/foreground/hero.jsp">英雄介绍</a></li>
			</ul>
			<p><a href="${base }/foreground/index.jsp">Back to 首页</a></p>
			<div class="clearfix"></div>
		</div>
		<h3 class="page-header">
			英雄联盟宇宙
		</h3>
		<div class="main" style="width: 85%">
			<div class="view view-first">
                    <img src="images/艾欧尼亚.png" >
                    <div class="mask">
                        <h2>艾欧尼亚</h2>
                        <p>艾欧尼亚的土地上充盈着未遭破坏的自然之美和原生魔法。这座庞大的岛屿上四散着人类的定居点，这是一群充满灵性的人，追求着平静和谐、与世无争的生活。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=19" class="info">艾欧尼亚</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/虚空之地.png" />
                    <div class="mask">
                        <h2>虚空之地</h2>
                        <p>伴着宇宙的诞生，一声尖叫宣示了虚空的开端。虚空代表着境界彼端某种不可知的虚无。它是一种不知餍足的饥饿，经过永世的等待，直到它的主人。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=20" class="info">虚空之地</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/德玛西亚.png" />
                    <div class="mask">
                        <h2>德玛西亚</h2>
                        <p>德玛西亚是一个实力雄厚、奉公守法的国家，有着功勋卓著的光荣军史。这里非常重视正义荣耀职责的意识形态，这里的人民为此感到强烈自豪。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=23" class="info">德玛西亚</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/皮尔特沃夫.png" />
                    <div class="mask">
                        <h2>皮尔特沃夫</h2>
                        <p>皮尔特沃夫是一座繁荣进步的城市，自身实力与影响力都在冉冉崛起。这里是瓦洛兰大陆的文化中心，它的实力并非来自军事力量。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=25" class="info">皮尔特沃夫</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img src="images/诺克萨斯.png" />
                    <div class="mask">
                        <h2>诺克萨斯</h2>
                        <p>诺克萨斯是一个威名震天的强大帝国。在诺克萨斯境外的人眼中，它拥兵自重、血腥野蛮、欲壑难填，但对于那些看透它好战外表的人来说，这里的社会氛围实际上超乎寻常地包容。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=21" class="info">诺克萨斯</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/巨神峰.png" />
                    <div class="mask">
                        <h2>巨神峰</h2>
                        <p>巨神峰是符文大陆的世界之巅，巨神峰坐落于远离文明的无人之地，对于许多人都是遥不可及的，只有那些意志最坚决的追寻者有幸一睹尊容。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=22" class="info">巨神峰</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/比尔吉沃特.png" />
                    <div class="mask">
                        <h2>比尔吉沃特</h2>
                        <p>比尔吉沃特是走私贩、劫掠者和不义之徒的避难港湾，富可敌国或是家破人亡都只在转瞬之间。对于那些逃避审判、债务和迫害的人。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=18" class="info">比尔吉沃特</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img src="images/暗影岛.png" />
                    <div class="mask">
                        <h2>暗影岛</h2>
                        <p>现在被称为暗影岛的这片土地曾经是环境优美的岛屿，但却因一场魔法灾难的毁灭打击而彻底改头换面。现在，黑雾无时无刻萦绕着这块岛屿，土地本身也遭到邪术的污染和腐化。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=26" class="info">暗影岛</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="images/恕瑞玛.png" />
                    <div class="mask">
                        <h2>恕瑞玛</h2>
                        <p>恕瑞玛帝国曾经是一个繁荣昌盛的文明，坐落于一片广袤的沙漠之中。在发展与繁荣的时代过后，闪亮的都城分崩离析，整个帝国也化为废墟。后来的几千年间，恕瑞玛的昔日荣耀。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=17" class="info">恕瑞玛</a>
                    </div>
                </div> 
                 <div class="view view-first">
                    <img src="images/班德尔城.png" />
                    <div class="mask">
                        <h2>班德尔城</h2>
                        <p>在班德尔城，任何约德尔人以外的种族都会感到自己的全部感官得到了强化。城中所见无不色彩斑斓，食物与水的味道让人经年沉醉——只要尝过一次，就终身难忘。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=27" class="info">班德尔城</a>
                    </div>
                </div> 
                 <div class="view view-first">
                    <img src="images/祖安.png" />
                    <div class="mask">
                        <h2>祖安</h2>
                        <p>祖安是一片庞大的地下城区，坐落在皮尔特沃夫周边蜿蜒的沟壑与峡谷之下。虽然祖安一直都笼罩在雾霾遮蔽的暮色中，但这里的繁华热闹却不让分毫，这的居民包罗万象，文化。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=24" class="info">祖安</a>
                    </div>
                </div> 
                 <div class="view view-first">
                    <img src="images/弗雷尔卓德.png" />
                    <div class="mask">
                        <h2>弗雷尔卓德</h2>
                        <p>弗雷尔卓德是一片环境恶劣、严酷无情的土地。这里的人们全都充满自豪并极具独立意识。他们个个都是天生的武士，强盗文化源远流长。</p>
                        <a href="${base}/foreground/hero_list.jsp?typeId=28" class="info">弗雷尔卓德</a>
                    </div>
                </div> 
			
		</div>
          	<div class="blog-sidebar" style="float:right;width:15%">
          	
          	
          	
				<h3 class="page-header">英雄职业</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄类型')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
				 <h3 class="page-header">英雄之地</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄势力')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
			</div>
          <div class="clearfix"></div>
	</div>
</div>

<!-- Games Page Ends here -->
<!-- 显示个人信息的模态框 -->
	<div class="modal fade" id="myInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的个人信息</h4>
					</div>
					<div class="modal-body" style="height: 280px">
						<iframe id="userInformation" width="100%" height="100%" frameborder="0" src="${base}/foreground/person_form.jsp"></iframe>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="closeWin">关闭</button>
						<button type="button" class="btn btn-primary" id="subIframe">更改信息</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- 显示我的文章模态框 -->
	<div class="modal fade" id="myArticle" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style=" top: 35%;left: 40%;
            transform: translate(-50%,-50%);
             min-width:60%;
             overflow: visible;">
		<div class="modal-dialog" style="width: 1000px" >
			<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的文章</h4>
					</div>
					<div class="modal-body" style="height: 500px">
						<iframe id="article_list" width="100%" height="100%" frameborder="0" src="${base}/foreground/article_list.jsp"></iframe>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
				<form action="${base}/action/user/modPassword" method="post" autocomplete="off" draggable="false" id="modPassword">
					<input type="hidden" name="id" value="${sessionScope.userId }">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tbody>
								<tr>
									<td width="30%">输入当前密码:</td>
									<td width="70%"><input type="password" class="form-control" name="oldPassword" id="oldPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">输入新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="newPassword" id="newPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">确认新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="passwordAgain" id="passwordAgain">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="checkPassword()">提交更改</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script type="text/javascript" src="${base}/foreground/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/bootstrap.min.js"></script>
</html>